<!DOCTYPE html>
<html>
<head>
<style>
.comcss{
    background-color: green;
    width: 200px;
    height: 200px;
    margin-top: 50px;
    margin-left: 200px;
    color: #ffffff;
    text-align: center;
    /* border: 10px solid red; */
}
.css1{
    box-shadow: 0px 0px  red;
}
.css11{
    box-shadow: 0px 0px 0px 20px  red;
}

.css2{
    box-shadow: 20px 20px 6px  teal;
}
.css3{
    box-shadow: 20px 20px 200px 0px teal;
}
.css4{
    box-shadow: 20px 20px 0px 20px teal;
}
.css5{
    box-shadow: inset 20px 10px teal;
}
.css6{
    box-shadow: 3px 3px red, -1em 0 0.4em olive;
}
.css7{
    border-radius:  100px  50px /100px 50px 20px;
}

</style>
</head>
<body style="background-color: #909090;">

<h1>border-radius 属性</h1>

<div class="comcss">无影</div>
<div class="comcss css1">普通阴影在正后方</div>
<div class="comcss css11">普通阴影-扩散</div>
<div class="comcss css3">模糊半径3</div>
<div class="comcss css2">模糊半径2</div>
<div class="comcss css4">扩散半径</div>
<div class="comcss css5">内插</div>
<!-- <div class="comcss css6">斜杠圆角属性的边框 ,还是得出四个值，对应左上，右下。右上左下</div>
<div class="comcss css7">斜杠圆角属性的边框 (a,b)/(c,d,e) 左上 a/c 右上 b/d 右下 a/e  左下 b/d</div> -->



</body>
</html>
